<template>
	<view class="container">
		<view class="title-top">
			欢迎使用！中志愿填报助手
		</view>
		<view class="button-item">


			<button class="login-button" :loading="loading" :disabled="loading" open-type="getPhoneNumber"
				@getphonenumber="handleGetPhoneNumber">
				{{ loading ? '登录中...' : '手机号一键登录' }}
			</button>
			<!-- -->
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { service } from '@/utils/request'
	import { computed, reactive, onMounted, type CSSProperties } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	//引入pinia
	import { useTokenStore } from '@/stores';
	const loading = ref(false);
	const tokenStore = useTokenStore()

	onMounted(() => {
	});

	uni.login({
		provider: 'weixin', // 登录服务提供商，微信小程序固定为'weixin'
		success: (res) => {
			// res.code: 登录凭证，有效期5分钟
			// res.errMsg: 错误信息，成功为'login:ok'
		},
		fail: (err) => {
			// 登录失败回调
			// err.errMsg: 错误信息
		},
		complete: () => {
			// 接口调用结束的回调（调用成功、失败都会执行）
		}
	})



	const login = () : Promise<string> => {
		return new Promise((resolve, reject) => {
			uni.login({
				provider: 'weixin',
				success: (res) => {
					if (res.errMsg === 'login:ok') {
						resolve(res.code)
					} else {
						reject(new Error(res.errMsg))
					}
				},
				fail: (err) => {
					reject(err)
				}
			})
		})
	}


	const handleGetPhoneNumber = async (e : any) => {
		try {
			// 1. 显示加载
			uni.showLoading({
				title: '登录中',
				mask: true
			})

			// 2. 处理用户拒绝授权
			if (e.errMsg === 'getPhoneNumber:fail user deny') {
				throw new Error('用户拒绝授权')
			}

			// 3. 获取登录code
			const loginResult = await login()

			console.log(e, '什么信息')
			// 4. 调用后端登录接口
			const loginRes = await service({
				url: '/appUserPhoneAuthLogin',
				method: 'POST',
				data: {
					// code: loginResult,
					// username: e.detail.code
					code: e.detail.code,
				}
			})
			if (loginRes.code == 200) {
				// 6. 提示成功
				// 5. 存储token
				//pinia 持久化token信息
				tokenStore.setAccessToken(loginRes.token);
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})
				uni.navigateTo({ url: '/pages/index/index' });
			}
			console.log(loginRes, '返回值？')


		} catch (error) {
			// 错误处理
			uni.showToast({
				title: error.message || '登录失败',
				icon: 'error'
			})
		} finally {
			// 隐藏加载
			uni.hideLoading()
		}
	}

	onLoad(() => {
		console.log('onLoad。。。。。。。。。')
	})
</script>

<style lang="scss" scoped>
	.container {
		// background-color: red;
		background-image: url('https://cw.jxfs365.com/appZhongKao/index-bg.png');
		background-size: cover;
		background-position: center;
		/* 可选，确保图片居中 */
		background-repeat: no-repeat;
		/* 可选，确保背景图片不重复 */
		height: 100vh;
		/* 设置body的高度为视口高度的100%，确保背景覆盖整个页面 */
		margin: 0;
		/* 移除默认的margin */
		padding: 0;

		/* 移除默认的padding */
		.title-top {
			text-align: center;
			padding-top: 307rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			font-size: 40rpx;
			color: #000000;

		}

		.button-item {
			padding-top: 500rpx;

			.login-button {
				width: 80%;
			}
		}

	}
</style>